<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">入库单列表</h5>
      </div>
    </div>
  </div>
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="d-flex align-items-center flex-wrap">
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="orderNoSearch" class="form-label mb-0 me-2 text-nowrap">单号:</label>
          <input type="text" id="orderNoSearch" class="form-control" style="width: 150px;" [(ngModel)]="orderNoKeyword" name="orderNoKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="orderTypeSearch" class="form-label mb-0 me-2 text-nowrap">入库类型:</label>
          <input type="text" id="orderTypeSearch" class="form-control" style="width: 150px;" [(ngModel)]="orderTypeKeyword" name="orderTypeKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="warehouseSearch" class="form-label mb-0 me-2 text-nowrap">仓库:</label>
          <input type="text" id="warehouseSearch" class="form-control" style="width: 150px;" [(ngModel)]="warehouseKeyword" name="warehouseKeyword">
        </div>
        <div class="ms-md-auto mb-2">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i><span>查询</span></button>
          <button class="btn btn-secondary ms-2" type="button" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-body border-bottom">
    <button id="create" class="btn btn-primary" type="button" (click)="openCreateModal()">
      <i class="fa fa-plus me-1"></i>
      <span>录入</span>
    </button>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>单号</th>
            <th>调拨单号</th>
            <th>入库类型</th>
            <th>仓库</th>
            <th>经办人</th>
            <th>入库日期</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let intOrderItem of intOrder.items">
            <td>{{ intOrderItem.orderNo }}</td>
            <td>{{ intOrderItem.transferNo }}</td>
            <td>{{ intOrderItem.orderType }}</td>
            <td>{{ intOrderItem.warehouse }}</td>
            <td>{{ intOrderItem.operator }}</td>
            <td>{{ intOrderItem.orderDate }}</td>
            <td>{{ intOrderItem.remarks }}</td>
            <td>
              <button class="btn btn-sm btn-primary me-1" type="button" (click)="openEditModal(intOrderItem.id)">
                <i class="fa fa-edit"></i>
                编辑
              </button>
              <button class="btn btn-sm btn-danger" type="button" (click)="deleteIntOrder(intOrderItem.id)">
                <i class="fa fa-trash"></i>
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info" *ngIf="intOrder.items.length > 0">
          当前显示 {{ intOrder.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, intOrder.totalCount) }} 条，总计 {{ intOrder.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;"
                    [(ngModel)]="currentPageSize"
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航" *ngIf="intOrder.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <ng-container *ngFor="let page of visiblePageNumbers">
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="intOrder.items.length === 0" class="text-center">
      <p>暂无数据</p>
    </div>
  </div>
</div>
<!-- 新建/编辑入库单模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ isEditMode ? '编辑入库单' : '新建入库单' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createIntOrderForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="orderNo" class="form-label">单号<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="orderNo" formControlName="orderNo">
              <div *ngIf="createIntOrderForm.get('orderNo').invalid && (createIntOrderForm.get('orderNo').dirty || createIntOrderForm.get('orderNo').touched)" class="text-danger">
                <small *ngIf="createIntOrderForm.get('orderNo').errors?.required">单号不能为空</small>
                <small *ngIf="createIntOrderForm.get('orderNo').errors?.maxlength">单号不能超过50个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="transferNo" class="form-label">调拨单号</label>
              <input type="text" class="form-control" id="transferNo" formControlName="transferNo">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="orderType" class="form-label">入库类型</label>
              <input type="text" class="form-control" id="orderType" formControlName="orderType">
            </div>
            <div class="col-md-6">
              <label for="warehouse" class="form-label">仓库</label>
              <input type="text" class="form-control" id="warehouse" formControlName="warehouse">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="operator" class="form-label">经办人</label>
              <input type="text" class="form-control" id="operator" formControlName="operator">
            </div>
            <div class="col-md-6">
              <label for="orderDate" class="form-label">入库日期</label>
              <input type="text" class="form-control" id="orderDate" formControlName="orderDate">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12">
              <label for="remarks" class="form-label">备注</label>
              <input type="text" class="form-control" id="remarks" formControlName="remarks">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div> 